<template>
  <div class="ai-paper-generator">
    <div class="header">
      <div class="title-section">
        <i class="fas fa-eye blue-icon"></i>
        <h1>试卷预览 &nbsp;&nbsp;<span style="font-size: 14px;">如果题库题目不足，某些题目数量可能会有缺少，请尽量选择数量足够的题库</span></h1>
      </div>
      <div class="actions">
        <!-- <button class="export-btn word-btn" @click="exportExcel">
          <i class="fas fa-file-word"></i> 导出题目列表
        </button>
        <button class="export-btn pdf-btn" @click="exportWord">
          <i class="fas fa-file-word"></i> 导出试卷
        </button> -->
        <el-dropdown trigger="click" @command="exportExam">
          <el-button type="primary">
            导出试卷<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="0">包含答案（Word）</el-dropdown-item>
            <el-dropdown-item command="1">不含答案（Word）</el-dropdown-item>
            <el-dropdown-item command="2">仅导出题目（Excel）</el-dropdown-item>
            <el-dropdown-item command="3">导出试卷（.paper）</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <button v-if="clickGenerator" class="export-btn open-modal-btn" @click="backHome">
          返回主页
        </button>
        <!-- <button class="export-btn open-modal-btn" @click="openModal">
          选择题库
        </button> -->
      </div>
    </div>
    <div class="body">
      <!-- 试卷信息框 -->
      <div class="paper-info">
        <div v-if="indexPaper && indexPaper.paperName">
          <h2 class="paper-title">{{ indexPaper.paperName }}</h2>
          <div class="paper-meta">
            <div class="meta-item">
              <i class="fas fa-star meta-icon"></i>
              <span>总分: {{ paperTotal }} 分</span>
            </div>
            <div class="meta-item">
              <i class="fas fa-clock meta-icon"></i>
              <span>考试时长: {{ indexPaper.timeLimit }} 分钟</span>
            </div>
            <div class="meta-item">
              <i class="fas fa-layer-group meta-icon"></i>
              <span>试卷难度: {{ getDifficultyText(indexPaper.avgDiffculty) }}</span>
            </div>
            <div class="meta-item">
              <i class="fas fa-list meta-icon"></i>
              <span>题目总数: {{ paperQuestions.length }} 道</span>
            </div>
          </div>
        </div>

        <!-- 分类显示题目 -->
        <div v-if="paperQuestions && paperQuestions.length > 0" class="data-body">
          <div v-for="(category, categoryIndex) in categorizedQuestions" :key="category.type" class="question-category">
            <!-- 分类标题   v-if="category.questions.length > 0" -->
            <h3 class="category-title">
              {{ getChineseNumber(category.type + 1) }}、{{ getCategoryTitle(category.type, category.questions) }}
            </h3>

            <!-- 题目卡片 -->
            <div v-for="(paperQuestion, questionIndex) in category.questions"
              :key="paperQuestion.paperQuestionId || questionIndex" class="question-card"
              :class="{ collapsed: !expandedQuestions[paperQuestion.paperQuestionId] }"
              :style="{ animationDelay: `${(categoryIndex * 0.1) + (questionIndex * 0.05)}s` }">
              <!-- 题目头部 -->
              <div class="question-header" @click="toggleQuestion(paperQuestion.paperQuestionId)">
                <div class="question-meta">
                  <span class="question-number">{{ getGlobalQuestionNumber(categoryIndex, questionIndex) }}.</span>
                  <span>{{ paperQuestion.question.content }}</span>
                  <span class="question-difficulty" :class="getDifficultyClass(paperQuestion.question.difficulty)">
                    {{ getDifficultyText(paperQuestion.question.difficulty) }}
                  </span>
                </div>
                <div class="question-score">
                  <span>{{ paperQuestion.score || 0 }}</span> 分
                  <i class="fas toggle-icon"
                    :class="expandedQuestions[paperQuestion.paperQuestionId] ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
                </div>
              </div>

              <!-- 题目选项 -->
              <div v-if="[0, 1, 3].includes(paperQuestion.question.type)" class="question-options">
                <div style="height: 10px;"></div>
                <div v-for="(option, oIndex) in parseOptions(paperQuestion.question.options)" :key="oIndex"
                  class="option-item" :class="{ 'correct-option': isCorrectOption(paperQuestion.question, oIndex) }">
                  <span class="option-letter">{{ String.fromCharCode(65 + oIndex) }}.</span>
                  <span class="option-text">{{ option }}</span>
                </div>
              </div>

              <!-- 简答题 -->
              <div v-else-if="paperQuestion.question.type === 4" class="question-analysis">
                <div style="height: 10px;"></div>
                <span>正确答案: </span>
                <span class="answer-text correct">{{ paperQuestion.question.correctAnswer || '暂无答案' }}</span>
              </div>

              <!-- 答案解析 -->
              <div class="question-analysis">
                <div class="analysis-header">
                  <i class="fas fa-lightbulb"></i>
                  <span>答案解析</span>
                </div>
                <div class="analysis-content">
                  <div class="analysis-text">{{ paperQuestion.question.parse || '暂无解析' }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="empty-body">
          <div style="height: 100px;"></div>
          <div class="icon-wrapper">
            <i class="fas fa-file-alt gray-icon"></i>
          </div>
          <p class="empty-text">等待生成试卷题目</p>
          <div class="tips">
            <p>
              <i class="fas fa-lightbulb blue-icon"></i>
              提示：AI会自动帮您生成试卷，AI生成试卷可能需要一点时间，请耐心等待
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <div v-if="!isModalOpen && clickGenerator" class="modal-overlay">
      <div class="modal">
        <!-- 模态框头部 -->
        <div class="modal-header">
          <div class="header-content">
            <i class="fas fa-database modal-icon"></i>
            <div>
              <h3>试卷参数配置</h3>
              <p class="subtitle">选择您需要组卷的题库资源,如果题库题目不足只会添加当前题库的题目</p>
            </div>
          </div>
          <!-- <button class="btn-close" @click="closeModal">
            <i class="fas fa-times"></i>
          </button> -->
        </div>

        <!-- 模态框内容 -->
        <div class="modal-content">
          <!-- 基于题库组卷配置 -->
          <div class="panel-section" v-if="activeMode === 'existing'">
            <h3><i class="fas fa-database"></i> 题库选择</h3>
            <div class="selected-banks-container">
              <div class="selected-banks">
                <div v-for="bank in selectedBankDetails" :key="getBankId(bank)" class="bank-tag">
                  <div class="bank-tag-content">
                    <span class="bank-name">{{ getBankName(bank) }}</span>
                    <span class="question-count">{{ getBankQuestionCount(bank) }}题</span>
                  </div>
                  <button class="remove-bank" @click.stop="removeBank(getBankId(bank))">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
                <button class="btn-add-bank" @click="showBankModal = true">
                  <i class="fas fa-plus"></i> 添加题库
                </button>
              </div>
              <div class="bank-selection-hint" v-if="selectedBanks.length === 0">
                <i class="fas fa-info-circle"></i>
                <span>请添加至少一个题库以继续</span>
              </div>
            </div>
          </div>

          <!-- 题库选择模态框 -->
          <BankSelectionModal v-if="showBankModal" :selected-banks="selectedBanks" :question-banks="questionBanks"
            @close="showBankModal = false" @update-selection="updateBankSelection" />


          <!-- 这里要写入一下信息的样式
            (1)、生成题目类型的数量，比如单选题1道，多选题1道，
		        (2)、然后添加各个题型的总分 
            -->
          <!-- <div class="question-type-card-container">
            <h1>题目类型</h1>
            <p class="description">请设置题目类型和数量</p>
            <div class="card-grid">
              <div class="type-card" v-for="(item, index) in questionTypes" :key="index">
                <h2>{{ item.label }}</h2>
                <div class="input-group">
                  <label>题目数量：</label>
                  <input type="number" v-model.number="questionTypeNums[item.countKey]" min="0" />
                </div>
                <div class="input-group">
                  <label>单个题目分数：</label>
                  <input type="number" v-model.number="questionTypeNums[item.scoreKey]" min="0" />
                </div>
              </div>
            </div>
          </div> -->

          <!-- 题型配置 -->
          <div class="panel-section">
            <div class="section-header">
              <div class="header-left">
                <i class="fas fa-list-ol" style="margin: 0 0 1rem 0; color: #4361EE;"></i>
                <h3>题型配置</h3>
              </div>
              <div class="total-count">
                总计: <strong>{{ totalQuestions }}</strong> 题 | 总分: <strong>{{ calculatedTotalScore }}</strong> 分
              </div>
            </div>
            <div class="question-type-config">
              <div v-for="type in questionTypes" :key="type.value" class="type-card"
                :class="{ active: paperConfig.questionTypes[type.value] > 0 }">
                <div class="type-header" @click="toggleQuestionType(type.value)">
                  <div class="type-icon" :style="{ backgroundColor: typeColors[type.value] }">
                    <i :class="type.icon"></i>
                  </div>
                  <div class="type-info">
                    <h4>{{ type.label }}</h4>
                    <p>{{ typeDescriptions[type.value] }}</p>
                  </div>
                </div>
                <div class="type-controls" v-if="paperConfig.questionTypes[type.value] > 0">
                  <div class="type-score-control">
                    <label>每题分数</label>
                    <input v-model.number="typeScores[type.value]" type="number" min="1"
                      @change="validateTypeScore(type.value)">
                  </div>
                  <div class="type-count-control">
                    <button class="btn-count" @click.stop="adjustTypeCount(type.value, -1)">
                      <i class="fas fa-minus-circle"></i>
                    </button>
                    <span class="count-display">{{ paperConfig.questionTypes[type.value] }}</span>
                    <button class="btn-count" @click.stop="adjustTypeCount(type.value, 1)">
                      <i class="fas fa-plus-circle"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 模态框底部 -->
          <div class="modal-footer">
            <!-- <button class="btn-cancel" @click="closeModal">
              <i class="fas fa-times"></i> 取消
            </button> -->
            <button :class="{ 'btn-confirm': true, 'no-confirm': !canGenerate }" @click="confirmAction"
              :disabled="!canGenerate">
              <i class="fas fa-check"></i> 确认选择
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BankSelectionModal from '@/components/paper/BankSelectionModal.vue'

import { mapGetters } from 'vuex'

import { getPaperDetail as getPaperDetailAPI, exportPaper as exportPaperAPI } from '@/api/paper';

import { getQuestionBankList as getQuestionBankListAPI, listQuestionBankAndQuestionNum as listQuestionBankAndQuestionNumAPI } from '@/api/question';

// 调用paper接口
import { listPapers as listPapersAPI } from "@/api/paper/index"
export default {
  name: 'AipaperGeneratorResultHeader',
  data() {
    return {
      paperConfig: {
        name: '',
        totalScore: 100,
        duration: 90,
        coverage: 70,
        questionTypes: {
          single: 1,
          multiple: 1,
          truefalse: 1,
          fillblank: 1,
          essay: 1
        },
        difficultyDistribution: {
          easy: 20,
          medium: 60,
          hard: 20
        },
      },
      typeDescriptions: {
        single: '选择一个正确答案',
        multiple: '选择多个正确答案',
        truefalse: '判断陈述是否正确',
        fillblank: '填写空白处的答案',
        essay: '简要回答题目问题'
      },
      typeColors: {
        single: '#4361EE',
        multiple: '#3A0CA3',
        truefalse: '#10B981',
        fillblank: '#F59E0B',
        essay: '#F72585'
      },
      typeScores: {
        single: 5,
        multiple: 8,
        truefalse: 3,
        fillblank: 5,
        essay: 10
      },
      activeMode: 'existing', // 'existing' or 'aiPanel'
      showBankModal: false, // 控制题库选择模态框的显示
      selectedBanks: [], // 选中的题库
      expandedQuestions: {}, // 跟踪每个题目的展开状态
      indexPaper: {
        paperId: 0,
        paperName: '等待获取试卷名称',// 试卷名称
        totalScore: 0, // 总分
        timeLimit: 120, // 考试时长（分钟）
        avgDiffculty: 0, // 试卷难度
      },
      isModalOpen: false,
      searchQuery: '', // 搜索框内容
      // selectedBanks: new Set(),
      questionBanks: [
        {
          createdAt: '2025-04-24T00:01:42',
          updatedAt: '2025-05-06T14:50:40',
          bankId: 1,
          bankName: 'Java基础题库',
          description: '包含Java基础知识题目',
          userId: 7,
          avgDiffculty: 5,
          isDel: 0,
          totalQuestionNum: 100,
        },
        {
          createdAt: '2025-04-25T00:01:42',
          updatedAt: '2025-05-06T14:50:40',
          bankId: 2,
          bankName: '数据库题库',
          description: '包含数据库相关知识题目',
          userId: 7,
          avgDiffculty: 6,
          isDel: 0,
          totalQuestionNum: 200,
        },
        {
          createdAt: '2025-04-26T00:01:42',
          updatedAt: '2025-05-06T14:50:40',
          bankId: 3,
          bankName: '数据结构与算法题库',
          description: '包含常见数据结构和算法题目',
          userId: 7,
          avgDiffculty: 7,
          isDel: 0,
          totalQuestionNum: 150,
        },
        {
          createdAt: '2025-04-26T00:01:42',
          updatedAt: '2025-05-06T14:50:40',
          bankId: 4,
          bankName: '数据结构与算法题库',
          description: '包含常见数据结构和算法题目',
          userId: 7,
          avgDiffculty: 7,
          isDel: 0,
          totalQuestionNum: 150,
        },
      ],
      currentPage: 1, // 当前页码
      itemsPerPage: 3, // 每页显示的题库数量
      questionTypeNums: {
        choiceNum: 1,
        choiceScore: 1,
        choicesNum: 1,
        choicesScore: 1,
        vacancyNum: 1,
        vacancyScore: 1,
        shortNum: 1,
        shortScore: 1,
        judgementNum: 1,
        judgementScore: 1
      },
      // questionTypes: [
      //   { label: '单选题', countKey: 'choiceNum', scoreKey: 'choiceScore' },
      //   { label: '多选题', countKey: 'choicesNum', scoreKey: 'choicesScore' },
      //   { label: '填空题', countKey: 'vacancyNum', scoreKey: 'vacancyScore' },
      //   { label: '简答题', countKey: 'shortNum', scoreKey: 'shortScore' },
      //   { label: '判断题', countKey: 'judgementNum', scoreKey: 'judgementScore' }
      // ],
      questionTypes: [
        { value: 'single', label: '单选题', icon: 'fas fa-dot-circle' },
        { value: 'multiple', label: '多选题', icon: 'fas fa-check-double' },
        { value: 'truefalse', label: '判断题', icon: 'fas fa-balance-scale' },
        { value: 'fillblank', label: '填空题', icon: 'fas fa-pencil-alt' },
        { value: 'essay', label: '简答题', icon: 'fas fa-align-left' }
      ],
      listParam: {
        pageNum: 1,
        pageSize: 999,
        paperName: ""
      },
    };
  },
  components: {
    BankSelectionModal
  },
  props: {
    clickGenerator: {
      type: Boolean,
      default: true
    }
  },
  created() {
    if (this.clickGenerator) {
      // 获取试卷详情
      if (!this.generatePaperId && this.generatePaperId == 0) {
        this.$router.push('/paper-index/paper-list');
      } else {
        this.getPaperDetail();
        this.getQuestionBankList();
      }
    } else {
      this.getPaperDetail();
      // this.getQuestionBankList();
    }

  },
  computed: {
    ...mapGetters('paper', [
      'getPaperQuestions', // 从 Vuex 中获取 paperQuestions
      'getGeneratePaperId',
      'papers',
      'getTotal'
    ]),
    ...mapGetters('user', [
      'getUserInfo'
    ]),
    ...mapGetters('aiPanel', [
      'currentRoleConfig',
      'getPapers'
    ]),
    total: {
      get() {
        return this.getTotal; // 绑定到 Vuex 的 getter
      },
      set(value) {
        this.$store.commit('paper/setTotal', value); // 绑定到 Vuex 的 setter
      }
    },
    generatePaperId: {
      get() {
        return this.getGeneratePaperId; // 绑定到 Vuex 的 getter
      },
      set(value) {
        this.$store.commit('paper/setGeneratePaperId', value); // 绑定到 Vuex 的 setter
      }
    },
    paperQuestions: {
      get() {
        return this.getPaperQuestions; // 绑定到 Vuex 的 getter
      },
      set(value) {
        this.$store.commit('paper/setPaperQuestions', value); // 绑定到 Vuex 的 setter
      }
    },
    papers: {
      get() {
        return this.getPapers; // 绑定到 Vuex 的 getter
      },
      set(value) {
        this.$store.commit('paper/setPapers', value); // 绑定到 Vuex 的 setter
      }
    },
    calculatedTotalScore() {
      // 计算所有题目的总分

      let total = 0
      for (const type in this.paperConfig.questionTypes) {
        total += this.paperConfig.questionTypes[type] * this.typeScores[type]
      }
      return total
    },
    paperTotal() {
      return this.paperQuestions.reduce((total, question) => {
        return total + (question.score || 0);
      }, 0);
    },
    categorizedQuestions() {
      // 按题型分类题目
      const categories = { 0: [], 1: [], 2: [], 3: [], 4: [] };
      this.paperQuestions.forEach((paperQuestion) => {
        categories[paperQuestion.question.type].push(paperQuestion);
      });

      // 转为数组并过滤掉空分类
      return Object.entries(categories)
        .filter(([_, questions]) => questions.length > 0)
        .map(([type, questions]) => ({
          type: Number(type),
          questions
        }));
    },
    filteredBanks() {
      // 根据搜索框内容过滤题库
      if (!this.searchQuery) return this.questionBanks;
      return this.questionBanks.filter((bank) =>
        bank.questionBank.bankName.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    },
    totalPages() {
      // 计算总页数
      return Math.ceil(this.filteredBanks.length / this.itemsPerPage);
    },
    paginatedBanks() {
      // 获取当前页的题库
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.filteredBanks.slice(start, end);
    },
    selectedBankDetails() {
      return this.questionBanks.filter(bank => {
        // Handle different possible structures of bank data
        const bankId = bank.questionBank && bank.questionBank.bankId || bank.bankId;
        return bankId && this.selectedBanks.includes(bankId);
      });
    },
    totalQuestions() {
      return Object.values(this.paperConfig.questionTypes).reduce((a, b) => a + b, 0)
    },
    // 判断是否可以生成试卷
    canGenerate() {
      return (
        this.totalQuestions > 0 &&
        this.selectedBanks.length > 0
      )
    },
  },
  methods: {
    // 导出试卷
    exportExam(index) {
      if (this.indexPaper.paperId == 0 || this.paperQuestions.length == 0) {
        this.$message.warning('暂无试卷，无法导出');
        return;
      }

      switch (index) {
        case "0":
          this.exportWord(true);
          break;
        case "1":
          this.exportWord(false);
          break;
        case "2":
          this.exportExcel();
          break;
        case "3":
          this.exportPaper();
          break;
        default:
          console.error('未知导出选项');
      }
    },
    // 导出 Word
    exportWord(withAnswer) {
      // 导出 Word 的逻辑
      this.$export.exportPaperToWordV2(
        this.getPaperQuestions,
        {
          paperName: this.indexPaper.paperName,
          creator: this.getUserInfo.realName,
          duration: this.indexPaper.timeLimit
        },
        withAnswer  // 是否包含答案
      )
    },
    // 导出 Excel
    exportExcel() {
      // 导出 Excel 的逻辑
      if (!Array.isArray(this.paperQuestions)) {
        console.error('试卷题目数据不正确')
        return
      }

      const exportData = this.paperQuestions.map((item, index) => ({
        序号: index + 1,
        题目名称: item.question ? item.question.content : '',
        类型: item.question ? this.getQuestionTypeText(item.question.type) : '',
        选项: item.question ? item.question.options : '',
        正确答案: item.question ? item.question.correctAnswer : '',
        解析: item.question ? item.question.parse : '',
        难度: item.question ? item.question.difficulty : '',
        分值: item.score
      }))

      const filename = `${this.indexPaper.paperName || '试卷'}.xlsx`
      this.$export.exportToExcel(exportData, filename)
    },
    async exportPaper() {
      // 导出试卷的逻辑
      try{
        let res = await exportPaperAPI({ paperId: this.indexPaper.paperId });
        if(res != ""){
          let { data } = res.data;
          this.$export.exportToPaper(data, this.indexPaper.paperName)
        }
      }catch (error) {
        this.$message.error('导出试卷失败，请稍后再试！');
        return;
      }
      
    },
    // 返回主页
    backHome() {
      this.fetchPapers();
      this.$router.push('/paper-index/paper-list');
      this.generatePaperId = 0;
      this.paperQuestions = [];
    },
    // 获取试卷详情
    async getPaperDetail() {
      // 如果没有试卷ID，且试卷ID为0，则不进行请求
      if (!this.generatePaperId && this.generatePaperId == 0) return;

      try {
        const res = await getPaperDetailAPI({ paperId: this.generatePaperId });

        let { data } = res.data;
        if (res && data) {
          this.indexPaper = data;
        }
      } catch (error) {
        // console.error('获取试卷详情失败:', error);
        // this.$message.error('获取试卷详情失败！');
      }
    },
    // 获取题库列表
    async getQuestionBankList() {
      try {
        if (!this.generatePaperId && this.generatePaperId == 0) return;
        let res = await listQuestionBankAndQuestionNumAPI();

        let { data } = res.data;

        if (res && data) {

          this.questionBanks = data;

        } else {
          this.$message.error('获取题库列表失败！');
        }
      } catch (error) {
        // console.error('获取题库列表失败:', error);
        this.$message.error('获取题库列表失败！');
      }
    },
    // 格式化输出选项
    parseOptions(optionStr) {
      if (!optionStr) return [];
      return optionStr.split(',').map(opt => opt.trim());
    },
    // 获取题型文本
    getQuestionTypeText(type) {
      const types = {
        0: '单选题',
        1: '多选题',
        2: '填空题',
        3: '判断题',
        4: '简答题',
      };
      return types[type] || '未知题型';
    },
    // 切换题目的展开/收起状态
    toggleQuestion(paperQuestionId) {
      // 切换题目的展开/收起状态
      this.$set(this.expandedQuestions, paperQuestionId, !this.expandedQuestions[paperQuestionId]);
    },
    // 判断选项是否为正确答案
    isCorrectOption(question, optionIndex) {
      if (!question.correctAnswer) return false;
      const correctAnswers = question.correctAnswer.split(',').map(a => a.trim());
      const options = this.parseOptions(question.options);
      return correctAnswers.includes(options[optionIndex]);
    },
    // 获取题目的全局序号
    getCategoryTitle(type, questions) {
      const typeText = this.getQuestionTypeText(type);
      const totalQuestions = questions.length;
      const scorePerQuestion = questions[0]?.score || 0;
      const totalScore = totalQuestions * scorePerQuestion;
      return `${typeText}（共${totalQuestions}题，每题${scorePerQuestion}分，合计${totalScore}分）`;
    },
    // 获取中文数字
    getChineseNumber(index) {
      const chineseNumbers = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
      return chineseNumbers[index - 1] || index;
    },
    // 获取题目的难度文本和类名
    getDifficultyText(difficulty) {
      if (difficulty <= 3) return '简单';
      if (difficulty <= 7) return '中等';
      return '困难';
    },
    // 获取题目的难度类名
    getDifficultyClass(difficulty) {
      if (difficulty <= 3) return 'difficulty-easy';
      if (difficulty <= 7) return 'difficulty-medium';
      return 'difficulty-hard';
    },
    // 获取题目的全局序号
    getGlobalQuestionNumber(categoryIndex, questionIndex) {
      let globalIndex = 0;
      for (let i = 0; i < categoryIndex; i++) {
        globalIndex += this.categorizedQuestions[i]?.length || 0;
      }
      return globalIndex + questionIndex + 1;
    },
    // 打开/关闭模态框
    openModal() {
      this.isModalOpen = !this.isModalOpen;
    },
    // 关闭模态框
    closeModal() {
      this.isModalOpen = !this.isModalOpen;
    },
    // 选择题库
    toggleBank(bankId) {
      if (this.selectedBanks.has(bankId)) {
        this.selectedBanks.delete(bankId);
      } else {
        this.selectedBanks.add(bankId);
      }
      this.selectedBanks = new Set(this.selectedBanks); // 强制 Vue 响应式更新
    },
    // 判断题库是否被选中
    isBankSelected(bankId) {
      return this.selectedBanks.has(bankId);
    },
    // 随机生成日期
    getRandomDate() {
      const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
      const month = months[Math.floor(Math.random() * 12)];
      const day = Math.floor(Math.random() * 28) + 1;
      return `${month}${day}日`;
    },
    // 检查题型数量是否超出题库总量
    validateQuestionTypeNumbers() {
      // 如果没有选择题库，跳过验证
      if (this.selectedBanks.length === 0) {
        return { valid: true };
      }

      // 计算所有选中题库的各题型总量
      const typeTotals = {
        single: 0,   // 单选题
        multiple: 0,  // 多选题
        truefalse: 0, // 判断题
        fillblank: 0, // 填空题
        essay: 0      // 简答题
      };

      // 遍历所有选中的题库，累加各题型数量
      this.selectedBankDetails.forEach(bank => {
        // 单选题
        typeTotals.single += (bank.choiceNum || (bank.questionBank && bank.questionBank.choiceNum) || 0);
        // 多选题
        typeTotals.multiple += (bank.choicesNum || (bank.questionBank && bank.questionBank.choicesNum) || 0);
        // 判断题
        typeTotals.truefalse += (bank.judgementNum || (bank.questionBank && bank.questionBank.judgementNum) || 0);
        // 填空题
        typeTotals.fillblank += (bank.vacancyNum || (bank.questionBank && bank.questionBank.vacancyNum) || 0);
        // 简答题
        typeTotals.essay += (bank.shortNum || (bank.questionBank && bank.questionBank.shortNum) || 0);
      });

      // 检查每种题型是否超出数量限制
      const typeNameMap = {
        single: '单选题',
        multiple: '多选题',
        truefalse: '判断题',
        fillblank: '填空题',
        essay: '简答题'
      };

      // 检查是否有题型超出

      let typeName = "";
      let msg = "超出题库中可用数量";
      let flag = true;
      for (const type in this.paperConfig.questionTypes) {
        const configCount = this.paperConfig.questionTypes[type];
        const availableCount = typeTotals[type];

        if (configCount > 0 && configCount > availableCount) {
          typeName += ` ${typeNameMap[type]},`;
          flag = false;
        }
      }
      
      if (!flag) {
        return {
          valid: flag,
          message: `${typeName}${msg}`
        }
      }

      return { valid: flag };
    },
    // 发送消息给ai 处理 
    async confirmAction() {
      // 校验题型数量
      const validationResult = this.validateQuestionTypeNumbers();
      if (!validationResult.valid) {
        this.$message.error(validationResult.message);
        return;
      }

      const fieldLabelMap = {
        single: '单选题',
        multiple: '多选题',
        fillblank: '填空题',
        essay: '简答题',
        truefalse: '判断题'
      };

      let prompt = '获取对应题库题目并添加进试卷中，无需确认直接添加。\n\n';

      prompt += '已选择的题库编号为：' + Array.from(this.selectedBanks).join('、') + '\n\n';
      prompt += '题型设置：\n';

      for (const key of Object.keys(this.paperConfig.questionTypes)) {
        const label = fieldLabelMap[key] || key;
        const count = this.paperConfig.questionTypes[key];
        const score = this.typeScores[key];
        prompt += `${label}数量：${count}\n`;
        prompt += `${label}分数：${score}\n`;
      }

      this.closeModal();

      try {
        await this.$store.dispatch('aiPanel/sendMessage', {
          prompt: prompt,
          agentType: this.currentRoleConfig.agentType || 'GENERAL'
        });
      } catch (error) {
        console.error('发送消息失败:', error);
        this.$message.error(`发送失败: ${error.message}`);
      }
    },
    // 重置搜索框和页码
    searchBanks() {
      // 重置到第一页
      this.currentPage = 1;
    },
    // 上一页
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    // 下一页
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    // 获取题库颜色
    getBankColor(bankId) {
      const colors = ['#FF5733', '#33FF57', '#3357FF', '#FF33A1', '#A133FF'];
      return colors[bankId % colors.length];
    },
    // 重新获取所有试卷
    async fetchPapers() {
      this.loading = true;
      try {
        let res = await listPapersAPI(this.listParam);

        let { data } = res.data;
        this.papers = data.rows;
        this.total = data.total;
      } catch (error) {
        this.$message.error('获取试卷数据失败！');
        console.error('获取试卷数据失败:', error);
      } finally {
        this.loading = false;
      }
    },
    // 删除选中的题库
    removeBank(bankId) {
      this.selectedBanks = this.selectedBanks.filter(id => id !== bankId)
    },
    // 更新选中的题库
    updateBankSelection(selectedIds) {
      this.selectedBanks = selectedIds
      this.showBankModal = false
    },
    // 调整题型数量
    toggleQuestionType(type) {
      if (this.paperConfig.questionTypes[type] > 0) {
        this.$set(this.paperConfig.questionTypes, type, 0)
      } else {
        this.$set(this.paperConfig.questionTypes, type, 1)
      }
    },
    validateTypeScore(type) {
      if (this.typeScores[type] < 1) {
        this.typeScores[type] = 1
      }
    },
    adjustTypeCount(type, delta) {
      const newValue = this.paperConfig.questionTypes[type] + delta
      if (newValue >= 0) {
        this.$set(this.paperConfig.questionTypes, type, newValue)
      }
    },
    getBankId(bank) {
      return bank.questionBank && bank.questionBank.bankId || bank.bankId;
    },
    getBankName(bank) {
      return bank.questionBank && bank.questionBank.bankName || bank.bankName;
    },
    getBankQuestionCount(bank) {
      return bank.questionBank && bank.questionBank.totalQuestionNum || bank.totalQuestionNum;
    },
  },
  watch: {
    // 监听试卷题目变化
    getPaperQuestions(newVal) {
      this.paperQuestions = newVal;
    },
    // 监听试卷ID变化
    generatePaperId(newVal) {
      this.generatePaperId = newVal;
      if (newVal == 0) {
        this.indexPaper = {
          paperId: 0,
          paperName: '等待获取试卷名称',// 试卷名称
          totalScore: 0, // 总分
          timeLimit: 120, // 考试时长（分钟）
          avgDiffculty: 0, // 试卷难度
        };
        this.paperQuestions = [];
      } else {
        this.getPaperDetail();
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "@/styles/variables.less";

.ai-paper-generator {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  // margin: 20px auto;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;

    .title-section {
      display: flex;
      align-items: center;

      h1 {
        margin-left: 10px;
        font-size: 20px;
        color: #333;
        font-weight: bold;
      }

      .blue-icon {
        color: #007bff;
        font-size: 24px;
      }
    }

    .actions {
      display: flex;
      gap: 10px;

      .el-button--primary {
        background-color: #4361EE;
      }

      .export-btn {
        display: flex;
        align-items: center;
        padding: 5px 10px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.3s;

        i {
          margin-right: 5px;
        }

        &:hover {
          background-color: #e0e0e0;
        }
      }

      .word-btn {
        background-color: #007bff;
        color: white;
      }

      .pdf-btn {
        background-color: #ffffff;
        color: #007bff;
        border: 1px solid #007bff;
      }

      .open-modal-btn {
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        padding: 5px 10px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.3s;

        &:hover {
          background-color: #0056b3;
        }
      }
    }
  }

  .body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;

    .paper-info {
      background-color: white;
      /* 与题目卡片一致的背景 */
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      padding: 20px;
      /* 调整内边距 */
      margin: 20px 0;
      /* 调整上下边距为20px，左右为0 */
      text-align: center;
      height: 100vh;
      overflow: auto;

      .paper-title {
        font-size: 30px;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
      }

      .paper-meta {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-bottom: 30px;

        .meta-item {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #666;

          .meta-icon {
            margin-right: 5px;
            font-size: 16px;
            color: #007bff;
          }
        }
      }
    }

    .data-body {
      flex: 1;
      overflow-y: auto;
      margin-top: 20px;
      padding-right: 10px;
      padding: 0 65px;

      &::-webkit-scrollbar {
        width: 8px;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 4px;
      }

      &::-webkit-scrollbar-thumb:hover {
        background-color: #aaa;
      }

      .question-category {
        margin-bottom: 20px;

        .category-title {
          font-size: 18px;
          font-weight: bold;
          color: #333;
          margin-bottom: 21px;
          text-align: left;
        }

        .question-card {
          background-color: white;
          border-radius: 8px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          margin-bottom: 20px;
          padding: 18px 15px;
          transition: all 0.3s;
          animation: fadeInUp 0.5s ease forwards;
          opacity: 0;
          transform: translateY(20px);

          &.collapsed {

            .question-content,
            .question-options,
            .question-analysis {
              display: none;
            }
          }

          .question-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;

            // margin-bottom: 10px;
            .question-meta {
              display: flex;
              gap: 10px;

              .question-number {
                font-weight: bold;
                color: #333;
              }

              .question-type {
                font-size: 14px;
                color: #666;
              }

              .question-difficulty {
                font-size: 14px;
                color: #fff8f8;
              }
            }

            .question-score {
              font-size: 14px;
              color: #007bff;

              .toggle-icon {
                margin-left: 10px;
                font-size: 14px;
                color: #666;
              }
            }
          }

          .question-content {
            margin-bottom: 10px;

            .question-text {
              font-size: 16px;
              color: #333;
            }
          }

          .question-options {
            .option-item {
              display: flex;
              align-items: center;
              margin-bottom: 5px;
              padding: 5px;
              border-radius: 4px;
              transition: background-color 0.3s;

              &.correct-option {
                background-color: #f0fff4;
                /* 浅绿色背景 */
                border-left: 3px solid #10b981;
                /* 绿色左边框 */
              }

              .option-letter {
                font-weight: bold;
                margin-right: 5px;
                color: #007bff;
              }

              .option-text {
                font-size: 14px;
                color: #333;
              }
            }
          }

          .question-analysis {
            margin-top: 10px;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 4px;

            .analysis-header {
              display: flex;
              align-items: center;
              gap: 5px;
              font-size: 14px;
              font-weight: bold;
              color: #333;

              i {
                color: #f59e0b;
              }
            }

            .analysis-content {
              margin-top: 5px;

              .analysis-text {
                font-size: 14px;
                color: #666;
                text-align: left;
              }
            }
          }
        }
      }
    }

    .empty-body {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;

      .icon-wrapper {
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f0f0f0;
        border-radius: 50%;
        margin-bottom: 20px;

        .gray-icon {
          font-size: 60px;
          color: #bbb;
        }
      }

      .empty-text {
        font-size: 16px;
        font-weight: bold;
        color: #000;
        margin-bottom: 15px;
      }

      .tips {
        p {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #666;
          margin: 10px 0;

          .blue-icon {
            margin-right: 5px;
            color: #007bff;
            font-size: 16px;
          }
        }
      }
    }
  }

  .question-difficulty {
    padding: 2px 10px;
    border-radius: 12px;
    /* 两边半圆，中间长方形 */
    font-size: 12px;
    color: #ffffff;
    /* 确保字体颜色为白色 */

    &.difficulty-easy {
      background-color: #10b981;
      /* 浅绿色 */
    }

    &.difficulty-medium {
      background-color: #f59e0b;
      /* 橙色 */
    }

    &.difficulty-hard {
      background-color: #ef4444;
      /* 红色 */
    }
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* 透明蒙版 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 80%;
  min-width: 1200px;
  overflow: hidden;
  animation: slideUp 0.3s ease;
}

.modal-header {
  background: linear-gradient(135deg, #4361EE, #3A0CA3);
  color: white;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .header-content {
    display: flex;
    align-items: center;
    gap: 1rem;

    .modal-icon {
      font-size: 1.5rem;
    }

    h3 {
      margin: 0;
      font-size: 1.25rem;
    }

    .subtitle {
      margin: 0.25rem 0 0;
      font-size: 0.875rem;
      opacity: 0.9;
    }
  }

  .btn-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: transform 0.2s ease;

    &:hover {
      transform: rotate(90deg);
    }
  }
}

.modal-content {
  padding: 1.5rem;

  .form-group {
    margin-bottom: 1.5rem;

    label {
      font-weight: bold;
      margin-bottom: 0.5rem;
      display: block;
    }

    .type-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;

      .type-label {
        font-weight: bold;
        flex: 1;
      }

      .type-controls {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        .type-input {
          width: 60px;
          padding: 0.5rem;
          border: 1px solid #ccc;
          border-radius: 8px;
          text-align: center;
        }
      }
    }
  }

  .search-container {
    margin-bottom: 1rem;
    text-align: center;
  }

  .search-input {
    width: 80%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
  }

  // 新弹窗样式

  /* 题库选择区域样式 */
  .selected-banks-container {
    margin-top: 0.5rem;
  }

  .selected-banks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    min-height: 48px;

    .bank-tag {
      display: flex;
      align-items: center;
      background: white;
      border-radius: 24px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      border: 1px solid @gray-200;
      transition: all 0.2s ease;
      overflow: hidden;

      &:hover {
        border-color: @primary-light;
        box-shadow: 0 2px 6px rgba(@primary, 0.1);
      }

      .bank-tag-content {
        padding: 0.5rem 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;

        .bank-name {
          font-size: 0.8125rem;
          font-weight: 500;
          color: @gray-800;
        }

        .question-count {
          font-size: 0.75rem;
          color: @gray-500;
          background: @gray-100;
          padding: 0.125rem 0.375rem;
          border-radius: 10px;
        }
      }

      .remove-bank {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: @gray-100;
        color: @gray-600;
        border: none;
        border-left: 1px solid @gray-200;
        cursor: pointer;
        transition: all 0.2s ease;

        &:hover {
          background: @error-light;
          color: @error;
        }

        i {
          font-size: 0.8rem;
        }
      }
    }

    .btn-add-bank {
      padding: 0.5rem 1rem;
      border-radius: 24px;
      background: white;
      border: 1px dashed @primary;
      color: @primary;
      font-size: 0.8125rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        background: rgba(@primary, 0.05);
        border-style: solid;
      }

      i {
        font-size: 0.8rem;
      }
    }
  }

  .bank-selection-hint {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(@primary, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: @primary;

    i {
      font-size: 0.9rem;
    }
  }

  .panel-section {
    margin-bottom: 1.5rem;

    h3 {
      font-size: 0.9375rem;
      color: @gray-700;
      margin: 0 0 1rem 0;
      display: flex;
      align-items: center;
      gap: 0.5rem;

      i {
        color: @primary;
      }
    }
  }

  .section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    position: relative;
    border-bottom: 1px solid @gray-200;
    padding-bottom: 0.5rem;

    .header-left {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .total-count {
      font-size: 0.875rem;
      color: @gray-600;
      display: flex;
      align-items: center;
      gap: 0.3rem;
      background-color: @gray-50;
      padding: 0.25rem 0.75rem;
      border-radius: 20px;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
      white-space: nowrap;
      line-height: 1.5;

      strong {
        color: @primary;
        font-weight: 600;
        margin: 0 2px;
      }
    }
  }

  .panel-section:last-child {
    margin-bottom: 2rem;
  }

  .question-type-config {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    justify-content: space-between;
    width: 100%;

    .type-card {
      flex: 1;
      min-width: 200px;
      border-radius: 8px;
      border: 1px solid @gray-200;
      overflow: hidden;
      transition: all 0.2s ease;

      &.active {
        border-color: @primary;
        box-shadow: 0 1px 3px rgba(@primary, 0.1);
      }

      .type-header {
        padding: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        cursor: pointer;
        background: white;
        position: relative;
        white-space: nowrap;

        .type-icon {
          width: 40px;
          height: 40px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          flex-shrink: 0;

          i {
            font-size: 1.25rem;
          }
        }

        .type-info {
          flex: 1;

          h4 {
            margin: 0;
            font-size: 0.875rem;
            color: @gray-800;
          }

          p {
            margin: 0.25rem 0 0;
            font-size: 0.75rem;
            color: @gray-500;
          }
        }
      }

      .type-controls {
        padding: 0.75rem;
        background: @gray-50;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;

        .type-score-control {
          flex: 0 0 auto;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          background: white;
          padding: 0.375rem 0.75rem;
          border-radius: 20px;
          border: 1px solid @gray-200;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

          label {
            font-size: 0.75rem;
            color: @gray-700;
            white-space: nowrap;
            margin-bottom: 0;
            font-weight: 500;
          }

          input {
            width: 40px;
            padding: 0.25rem;
            border: none;
            border-radius: 4px;
            text-align: center;
            font-size: 0.875rem;
            background: transparent;
            color: @primary;
            font-weight: 600;

            &:focus {
              outline: none;
              background-color: @gray-50;
            }

            &::-webkit-inner-spin-button,
            &::-webkit-outer-spin-button {
              opacity: 0;
              height: 1.5em;
              width: 1.5em;
              margin-right: -0.75em;
              position: relative;
              z-index: 2;
            }
          }
        }

        .type-count-control {
          display: flex;
          align-items: center;
          background: white;
          padding: 0.25rem;
          border-radius: 20px;
          border: 1px solid @gray-200;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

          .btn-count {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: none;
            background: @gray-100;
            color: @primary;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
              background: @primary-light;
              color: darken(@primary, 10%);
              transform: scale(1.05);
            }

            &:first-child {
              color: #e63946;

              &:hover {
                background: rgba(#e63946, 0.1);
                color: darken(#e63946, 10%);
              }
            }

            &:last-child {
              color: #2a9d8f;

              &:hover {
                background: rgba(#2a9d8f, 0.1);
                color: darken(#2a9d8f, 10%);
              }
            }

            i {
              font-size: 1rem;
            }
          }

          .count-display {
            min-width: 30px;
            text-align: center;
            font-weight: 600;
            color: @gray-800;
            font-size: 0.9rem;
          }
        }
      }
    }
  }

  .total-count {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid @gray-200;
    text-align: center;
    font-size: 0.875rem;
    color: @gray-700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    strong {
      color: @primary;
      font-weight: 600;
    }

    .score-match {
      margin-left: 0.5rem;
      font-size: 0.75rem;
      padding: 0.125rem 0.5rem;
      border-radius: 10px;
      background: @success-light;
      color: @success;

      &.match-error {
        background: @error-light;
        color: @error;
      }

      i {
        margin-right: 0.25rem;
      }
    }
  }


}

.modal-footer {
  padding: 1rem 1.5rem;
  background: #f8f9fa;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;

  .btn-cancel,
  .btn-confirm {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;

    i {
      font-size: 1rem;
    }
  }

  .btn-cancel {
    background: white;
    border: 1px solid #ccc;
    color: #333;

    &:hover {
      background: #f0f0f0;
    }
  }

  .btn-confirm {
    background: #4361EE;
    border: none;
    color: white;

    &:hover {
      background: #364fc7;
    }
  }

  .no-confirm {
    background-color: #878787;

    &:hover {
      background: #878787;
      cursor: not-allowed;
    }
  }
}

.bank-list-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.question-type-card-container {
  padding: 20px;

  h1 {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .description {
    color: #666;
    margin-bottom: 20px;
  }

  .card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .type-card {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 16px;
    width: 220px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    h2 {
      font-size: 18px;
      margin-bottom: 12px;
    }

    .input-group {
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;

      label {
        font-size: 14px;
        margin-bottom: 4px;
      }

      input {
        padding: 6px 8px;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 14px;
        width: 100%;
      }
    }
  }
}

.bank-list {
  display: flex;
  gap: 1rem;
  // overflow: hidden;
  width: 80%;
}

.bank-card {
  width: calc(33.333% - 1rem);
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  &.selected {
    border: 2px solid #4361EE;
  }

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }

  .card-content {
    padding: 1rem;

    .bank-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 5px;
      color: #fff;
    }

    .bank-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 70%;

      &:hover {
        // white-space: wrap;
        overflow: visible;
        text-overflow: clip;
      }
    }


    .bank-info {
      h4 {
        font-size: 1rem;
        margin: 0 0 0.5rem;
        color: #333;
      }

      .description {
        font-size: 0.875rem;
        color: #666;
        margin-bottom: 0.5rem;
      }

      .meta-data {
        font-size: 0.875rem;
        color: #666;

        .question-count,
        .avg-difficulty,
        .update-time {
          display: block;
          margin-bottom: 0.25rem;
        }
      }
    }
  }
}

.nav-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #4361EE;
  transition: color 0.2s;

  &:hover {
    color: #3A0CA3;
  }

  &:disabled {
    color: #ccc;
    cursor: not-allowed;
  }
}

.left-btn {
  position: absolute;
  left: 0;
}

.right-btn {
  position: absolute;
  right: 0;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>